<template>
  <div>
    <el-card
      ><el-alert
        show-icon
        :closable="false"
        title="
注意：只允许为第三级分类设置相关参数！"
        type="warning"
        effect="dark"
      >
      </el-alert>
      <!-- 选择商品分类区 -->
      <el-row class="el-top">
        <el-col>
          <span>选择商品分类：</span>
          <!-- 级联选择框 -->
          <el-cascader
            :props="cateProps"
            v-model="selectCateKeys"
            :options="cateList"
            @change="handleChange"
          ></el-cascader>
        </el-col>
      </el-row>
      <!-- tab页签区域 -->
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <!-- 动态参数 -->
        <el-tab-pane label="动态参数" name="many">
          <el-button size="mini" type="primary" :disabled="isBtnDisabled"
            >添加参数</el-button
          >
          <!-- 动态参数表格 -->
          <el-table :data="manyTableData" border stripe>
            <!-- 索引列 -->
            <el-table-column type="index"></el-table-column>
            <el-table-column
              label="参数名称"
              prop="attr_name"
            ></el-table-column>
          </el-table>
        </el-tab-pane>
        <!--静态参数  -->
        <el-tab-pane label="静态属性" name="only">
          <el-button size="mini" type="primary" :disabled="isBtnDisabled"
            >添加属性</el-button
          >
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 添加参数的对话框 -->
    <el-dialog
      :title="'添加'+titleText"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cateList: [],
      //   级联菜单配置对象
      cateProps: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
      },
      //  级联选择框双向绑定的事件
      selectCateKeys: [],
      //   被激活的页签的名称
      activeName: "many",
      //   动态参数的数据
      manyTableData: [],
      //静态属性的数据
      onlyTableData: [],
    };
  },
  created() {
    this.getCateList();
  },
  methods: {
    //  获取所有商品分类列表
    async getCateList() {
      const { data: cateRes } = await this.axios.get(
        "https://www.liulongbin.top:8888/api/private/v1/categories"
      );
      if (cateRes.meta.status !== 200) {
        return this.$message.error("获取商品分类失败！");
      } else {
        this.cateList = cateRes.data;
        // console.log(this.cateList);
      }
    },
    // 区分是否是三级分类
    async handleChange() {
      this.getParamsData();
    },
    // tab页签点击事件的处理函数
    handleTabClick() {
      console.log(this.activeName);
      this.getParamsData();
    },
    // 获取参数列表
    async getParamsData() {
      if (this.selectCateKeys.length !== 3) {
        this.selectCateKeys = [];
        return;
      } else {
        // 是三级的分类
        // console.log(this.selectCateKeys);
        //根据所选分类的Id,和当前所处的面板，获取对应的参数
        const { data: changeRes } = await this.axios.get(
          `https://www.liulongbin.top:8888/api/private/v1/categories/${this.cateId}/attributes`,
          {
            params: { sel: this.activeName },
          }
        );
        if (changeRes.meta.status !== 200) {
          return this.$message.error("获取参数列表失败！");
        }
        console.log(changeRes.data);
        // 如果是many上的话
        if (this.activeName === "many") {
          this.manyTableData = res.data;
        } else {
          this.onlyTableData = res.data;
        }
      }
    },
  },
  computed: {
    //   如果按钮需要被禁用则返回true 否则返回false
    isBtnDisabled() {
      if (this.selectCateKeys.length !== 3) {
        return true;
      }
      return false;
    },
    // 当前选中的三级分类的id
    cateId() {
      if (this.selectCateKeys.length === 3) {
        return this.selectCateKeys[2];
      }
      return null;
    },
    titleText(){
        if(this.activeName==='many'){
            return "动态参数"
        }
        return "静态属性"
    }
  },
};
</script>
<style lang='scss' scoped>
.el-top {
  margin: 15px 0;
}
</style>